<template>
	<view class="find-notice-bar y-flex y-row y-align-center page-padding-gap" :style="{'background-color': bgColor, 'border-radius': borderRadius + 'rpx'}">
		<image class="find-notice-bar-icon" :src="icon" mode="heightFix" v-if="isIconImage"></image>
		<com-icon :name="icon" size="35" :color="color" v-else></com-icon>
		<swiper class="find-notice-bar-swiper y-flex-1 ml-20" autoplay current="0" :interval="3000" vertical circular :duration="300">
			<swiper-item class="y-flex y-justify-center" v-for="(item, index) in data" :key="index">
				<text class="fs-27 lines-1" :style="{color: textColor}" @tap="handleItemTap(item)">{{item.title}}</text>
			</swiper-item>
		</swiper>
		<text class="fs-24 ml-20" :style="{color: textColor}" v-if="moreText" @tap="handleMoreTap">{{moreText}}</text>
	</view>
</template>

<script>
	export default {
		inject: ['getSkinColor', 'navigate'],
		props: {
			data: {
				type: Array,
				default () {
					return new Array
				}
			},
			options: {
				type: Object,
				default () {
					return new Object
				}
			},
			bgColor: {
				type: String,
				default: ''
			}
		},
		computed: {
			skinColor () {
				return this.getSkinColor()
			},
			icon () {
				return this.options.icon || 'notification'
			},
			moreText () {
				return this.options.moreText || ''
			},
			borderRadius () {
				return this.options.borderRadius
			},
			isIconImage () {
				return this.icon.indexOf('http://') > -1 || this.icon.indexOf('https://') > -1
			},
			color () {
				return this.skinColor.color_1
			},
			textColor () {
				return this.skinColor.color_3
			}
		},
		methods: {
			handleMoreTap () {
				this.navigate(this.options.moreUrl)
			},
			handleItemTap (item) {
				this.navigate(item.url)
			}
		}
	}
</script>

<style>
	.find-notice-bar-icon {
		height: 35rpx;
	}
	.find-notice-bar-swiper{
		height: 80rpx;
	}
</style>